<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02_模板语法</title>
</head>
<body>
<!--
1. 模板的理解:
  动态的html页面
  包含了一些JS语法代码
    大括号表达式
    指令(以v-开头的自定义标签属性)
2. 双大括号表达式
  语法: {{exp}} 或 {{{exp}}}
  功能: 向页面输出数据
  可以调用对象的方法
3. 指令一: 强制数据绑定
  功能: 指定变化的属性值
  完整写法:
    v-bind:xxx='yyy'  //yyy会作为表达式解析执行
  简洁写法:
    :xxx='yyy'
4. 指令二: 绑定事件监听
  功能: 绑定指定事件名的回调函数
  完整写法:
    v-on:click='xxx'
  简洁写法:
    @click='xxx'
-->

<div id="app">
    <h2>1. 双大括号表达式</h2>
    <p>{{content}}</p>
    <p>{{content.toUpperCase()}}</p>
    <p>{{content.toLocaleLowerCase()}}</p>
    <p>{{content.substr(1,19).toLocaleLowerCase()}}</p>

    <p v-text="val">当作文本</p>
    <p v-html="val">当作HTML</p>



    <h2>2. 指令一: 强制数据绑定</h2>
    <a href="url">访问指定站点</a><br>
    <a v-bind:href="url">访问指定站点2</a><br>
    <a :href="url">访问指定站点2</a><br>
    <!--    强制绑定-->
    <img v-bind:src="imgUrl"></img>
    <img :src="imgUrl"></img>

    <h2>3. 指令二: 绑定事件监听</h2>
    <button v-on:click="test">点我</button>
    <button @click="test">点我</button>
    <button @click="test(content)">带参数传递</button>
</div>


<script type="text/javascript" src="../vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            content: 'NBA I Love This Game',
            url: 'http://hexo.iszychen.club',
            imgUrl: 'https://cn.vuejs.org/images/logo.png',
            val: '<p>文本测试</p>'
        },
        methods: {
            test() {
                alert('这是一个Vue绑定事件噢!!!')
            },
            test(msg){
                alert(msg)
            }
        }
    })
</script>
</body>
</html>